<template>
  <div class="container">
    <a-form-model :model="form" ref="form" v-bind="layout" :rules="rules">
      <a-form-model-item label="团员" prop="memberId">
        <a-select v-model="form.memberId" placeholder="团员">
          <a-select-option
            v-for="(item, index) in listData"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="推优内容" prop="name">
        <a-input v-model="form.name" placeholder="推优内容" />
      </a-form-model-item>
      <a-form-model-item label="级别" prop="grade">
        <a-select v-model="form.grade" placeholder="级别">
          <a-select-option :value="1"> 中央广播电视总台 </a-select-option>
          <a-select-option :value="2"> 广电总局 </a-select-option>
          <a-select-option :value="3"> 中直机关 </a-select-option>
          <a-select-option :value="4">全国</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="类型" prop="type">
        <a-select v-model="form.type" placeholder="推优类型">
          <a-select-option :value="1"> 优秀共青团员 </a-select-option>
          <a-select-option :value="2"> 优秀团员领导干部 </a-select-option>
          <a-select-option :value="3"> 优秀团务工作者 </a-select-option>
        </a-select>
      </a-form-model-item>

    </a-form-model>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      rules: {
        name: [{required: true, message: '请输入推优内容', trigger: 'blur'}],
        grade: [{required: true, message: '请输入级别', trigger: 'blur'}],
        type: [{required: true, message: '请输入类型', trigger: 'change'}],
        memberId: [{required: true, message: '请输入团员', trigger: 'change'}],
      },
      listData: [],
    };
  },
  mounted() {
    // if (this.$route.query.id) {
    //   this.form = this.$route.query
    // }
    this.getList();
  },
  methods: {
    getList() {
      this.$ajax({
        url: this.$api.member.findList,
        data: {status: "2"},
        success: (result) => {
          this.listData = result;
        },
        fail: (err) => {
          this.$message.success(err);
        },
      });
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$api.excellence.saveOrUpdate,
            data: this.form,
            success: (result) => {
              this.$message.success("操作成功");
              this.$emit("pass", null);
              // this.$router.push(`/member/list`);
            },
            fail: (err) => {
              this.$message.success(err);
              this.$emit("reject", null);
            },
          });
        } else {
          this.$emit('reject', null);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 108px !important;
  .header {
    height: 56px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding-left: 2.4rem;
  }
  .content {
    height: auto;
    padding: 3.2rem 13.2rem;
    border-top: 0.1rem solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
  }
  .footer {
    height: 64px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2.4rem;
    .ant-btn {
      margin-left: 1.6rem;
    }
  }
}
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>
